<template>
  <div class="flow-box">
    <el-row style="margin-bottom:20px;">
      <el-col :span="10" :offset="14" style="text-align:right;">
        <span>时间筛选：</span>
        <el-select v-model="timeWay" style="width:100px;">
          <el-option
            v-for="item in timeWayOptions"
            :key="item.value"
            :label="item.label"
            :value="item.value"
          />
        </el-select>
        <el-date-picker
          v-show="timeWay== 'timeDay'"
          v-model="dayValue"
          align="right"
          type="date"
          placeholder="选择日期"
        />
        <el-date-picker
          v-show="timeWay== 'timeWeek'"
          v-model="WeekValue"
          type="week"
          format="yyyy 第 WW 周"
          placeholder="选择周"
        />
        <el-date-picker
          v-show="timeWay== 'timeMonth'"
          v-model="monthValue"
          type="month"
          placeholder="选择月"
        />
        <el-date-picker
          v-show="timeWay== 'timeCustom'"
          v-model="customValue"
          type="daterange"
          range-separator="|"
          start-placeholder="开始日期"
          end-placeholder="结束日期"
          style="width:240px;"
        />
      </el-col>
    </el-row>
    <!-- 流量趋势 -->
    <div class="class-nav clearfix">
      <div class="class-title">
        <span>流量趋势</span>
      </div>
    </div>
    <div class="stat-card-box" style="margin:20px 0;">
      <template v-for="(item,index) in shopList">
        <div :key="index" class="stat-card user-view">
          <div class="card-title">
            <span>{{ item.title }}</span>
            <el-tooltip :content="item.hint" class="item" effect="light" placement="top">
              <i class="el-icon-info" />
            </el-tooltip>
          </div>
          <div class="card-user">{{ item.nowNum }}</div>
          <div class="card-yesterday">
            <div style="margin-bottom:10px;">
              <span>较前一天</span>
              <span class="card-yesterday-num">{{ item.compare }}</span>
            </div>
          </div>
        </div>
      </template>
    </div>
    <div style="margin:20px 0;">
      <div id="tendency" style="width:100%;height:340px;" />
    </div>
    <!-- 流量表格 -->
    <el-table
      :data="flowTableData.slice((currentPage-1)*pageSize,currentPage*pageSize)"
      :header-cell-style="{background:'#eef1f6',}"
      border
      style="width: 100%;margin:20px 0;"
    >
      <el-table-column prop="time" label="时间" align="center" />
      <el-table-column prop="shopVisit" label="店铺访客数(UV)" align="center" />
      <el-table-column prop="shopCaller" label="店铺访问量(PV)" align="center" />
      <el-table-column prop="goodsVisit" label="商品访问数" align="center" />
      <el-table-column prop="goodsCaller" label="商品访客数" align="center" />
    </el-table>
    <!-- 分页 -->
    <el-pagination
      :current-page.sync="currentPage"
      :page-size="pageSize"
      :total="flowTableData.length"
      background
      layout="total, prev, pager, next, jumper"
      style="text-align:center;margin-bottom:20px;"
      @current-change="handleCurrentChange"
    />
    <!-- 流量分布 -->
    <div class="class-nav clearfix">
      <div class="class-title">
        <span>流量分布</span>
      </div>
    </div>
    <el-row :gutter="50">
      <el-col :span="12">
        <div style="margin:20px 0;color:#353535;font-size:14px;">
          <span>终端系统分布</span>
          <el-tooltip class="item" effect="light" placement="top">
            <div slot="content">手机系统分布：筛选时间内，使用各类系统设备的用户数占比。</div>
            <i class="el-icon-info" />
          </el-tooltip>
        </div>
        <div>
          <div id="terminal" style="width:700px;height:300px;" />
        </div>
      </el-col>
      <el-col :span="12">
        <div style="margin:20px 0;color:#353535;font-size:14px;">
          <span>渠道分布</span>
          <el-tooltip class="item" effect="light" placement="top">
            <div slot="content">
              H5流量：筛选时间内，访问店铺所有H5页面的浏览量。
              <br />小程序流量：筛选时间内，访问店铺所有小程序页面的浏览量。
            </div>
            <i class="el-icon-info" />
          </el-tooltip>
        </div>
        <div>
          <div id="channel" style="width:100%;height:300px;" />
        </div>
      </el-col>
    </el-row>
    <el-row :gutter="50" style="margin:20px 0;">
      <el-col :span="12">
        <div style="margin:20px 0;color:#353535;font-size:14px;">
          <span>地域分布</span>
          <el-tooltip class="item" effect="light" placement="top">
            <div slot="content">国内各个省份流量、用户分布情况</div>
            <i class="el-icon-info" />
          </el-tooltip>
        </div>
        <div>
          <div id="territory" style="width:700px;height:600px;" />
        </div>
      </el-col>
      <el-col :span="12">
        <div class="trafficAreaTopTitle">访客榜TOP10省份</div>
        <el-table
          :data="regionTableData"
          :header-cell-style="{background:'#eef1f6',}"
          border
          style="width: 100%;"
        >
          <el-table-column prop="top" label="排名" align="center" />
          <el-table-column prop="territory" label="地域" align="center" />
          <el-table-column prop="browseNum" label="浏览量(PV)" align="center" />
          <el-table-column prop="CallerNum" label="访客量(uv)" align="center" />
        </el-table>
      </el-col>
    </el-row>
  </div>
</template>

<script>
import 'echarts/map/js/china'
import echarts from 'echarts'
export default {
  data() {
    return {
      tendencyChart: null,
      terminalChart: null,
      channelChart: null,
      territoryChart: null,

      shopList: [
        {
          title: '店铺访客数(UV)',
          hint: '筛选时间内，店铺所有页面的访问人数;',
          nowNum: '236',
          compare: '+26%'
        },
        {
          title: '店铺访问量(PV)',
          hint: '店铺浏览量：筛选时间内，店铺所有页面被访问的次数，一个人在筛选时间内访问多次记为多次',
          nowNum: '312',
          compare: '+26%'
        },
        {
          title: '商品访问数',
          hint: '筛选时间内，商品页面的访问人数;',
          nowNum: '352',
          compare: '+26%'
        },
        {
          title: '商品访客数',
          hint: '商品浏览量：筛选时间内，商品详情页被访问的次数，一个人在筛选时间内访问多次记为多次',
          nowNum: '352',
          compare: '+26%'
        }
      ],
      flowTableData: [
        {
          time: '2019-06-03',
          shopVisit: '122',
          shopCaller: '321',
          goodsVisit: '15',
          goodsCaller: '23'
        },
        {
          time: '2019-06-02',
          shopVisit: '192',
          shopCaller: '361',
          goodsVisit: '45',
          goodsCaller: '63'
        },
        {
          time: '2019-06-01',
          shopVisit: '322',
          shopCaller: '421',
          goodsVisit: '25',
          goodsCaller: '28'
        }
      ],
      regionTableData: [
        {
          top: '1',
          territory: '北京',
          browseNum: '451',
          CallerNum: '232'
        },
        {
          top: '2',
          territory: '上海',
          browseNum: '451',
          CallerNum: '232'
        },
        {
          top: '3',
          territory: '广州',
          browseNum: '451',
          CallerNum: '232'
        }
      ],
      total: 0,
      currentPage: 1,
      pageSize: 10,
      dayValue: '',
      WeekValue: '',
      monthValue: '',
      customValue: '',
      timeWay: 'timeDay',
      timeWayOptions: [
        {
          value: 'timeDay',
          label: '自然天'
        }, {
          value: 'timeWeek',
          label: '自然周'
        }, {
          value: 'timeMonth',
          label: '自然月'
        }, {
          value: 'timeCustom',
          label: '自定义'
        }
      ]
    }
  },
  mounted() {
    this.initTendencyChart()
    this.initTerminalChart()
    this.initChannelChart()
    this.initTerritoryChart()
  },
  beforeDestroy() {
    if (!this.tendencyChart) {
      return
    }
    this.tendencyChart.dispose()
    this.tendencyChart = null
  },
  methods: {
    initTendencyChart() {
      const chart = document.getElementById('tendency')
      chart.style.width = window.innerWidth - 250 + 'px'
      this.tendencyChart = echarts.init(chart)
      this.tendencyChart.setOption(
        {
          backgroundColor: '#fff',
          title: {
            text: '近期趋势',
            textStyle: {
              fontWeight: 'normal',
              fontSize: 16,
              color: '#353535'
            },
            left: '0%'
          },
          tooltip: {
            trigger: 'axis',
            axisPointer: {
              lineStyle: {
                color: '#57617B'
              }
            }
          },
          legend: {
            icon: 'rect',
            itemWidth: 14,
            itemHeight: 5,
            itemGap: 13,
            show: true,
            data: ['店铺访客数(UV)', '店铺访问量(PV)', '商品访客数', '商品访问量'],
            selected: { '店铺访客数(UV)': false, '店铺访问量(PV)': true, '商品访客数': false, '商品访问量': true },
            x: 'center',
            textStyle: {
              fontSize: 12,
              color: '#353535'
            }
          },
          grid: {
            left: '0%',
            right: '2%',
            bottom: '3%',
            containLabel: true
          },
          xAxis: [{
            type: 'category',
            boundaryGap: false,
            axisLine: {
              lineStyle: {
                color: '#57617B'
              }
            },
            data: ['2019-06-01', '2019-06-02', '2019-06-03', '2019-06-04', '2019-06-05', '2019-06-06', '2019-06-07', '2019-06-08', '2019-06-09', '2019-06-10', '2019-06-11', '2019-06-12']
          }, {
            axisPointer: {
              show: false
            },
            axisLine: {
              lineStyle: {
                color: '#57617B'
              }
            }
          }],
          yAxis: [
            {
              type: 'value',
              name: '',
              axisTick: {
                show: false
              },
              axisLine: {
                lineStyle: {
                  color: '#57617B'
                }
              },
              axisLabel: {
                margin: 10,
                textStyle: {
                  fontSize: 14
                }
              },
              splitLine: {
                lineStyle: {
                  color: '#eee'
                }
              }
            }
          ],
          series: [
            {
              name: '店铺访客数(UV)',
              type: 'line',
              smooth: true,
              show: false,
              symbol: 'circle',
              symbolSize: 5,
              showSymbol: false,
              lineStyle: {
                normal: {
                  width: 1
                }
              },
              areaStyle: {
                normal: {
                  color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
                    offset: 0,
                    color: 'rgba(137, 189, 27, 0.3)'
                  }, {
                    offset: 0.8,
                    color: 'rgba(137, 189, 27, 0)'
                  }], false),
                  shadowColor: 'rgba(0, 0, 0, 0.1)',
                  shadowBlur: 10
                }
              },
              itemStyle: {
                normal: {
                  color: 'rgb(137,189,27)',
                  borderColor: 'rgba(137,189,2,0.27)',
                  borderWidth: 12

                }
              },
              data: [599.00, 399.00, 299.00, 199.00, 699.00, 499.00, 599.00, 299.00, 599.00, 499.00, 599.00, 299.00]
            },
            {
              name: '店铺访问量(PV)',
              type: 'line',
              smooth: true,
              symbol: 'circle',
              symbolSize: 5,
              showSymbol: false,
              lineStyle: {
                normal: {
                  width: 1
                }
              },
              areaStyle: {
                normal: {
                  color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
                    offset: 0,
                    color: 'rgba(0, 136, 212, 0.3)'
                  }, {
                    offset: 0.8,
                    color: 'rgba(0, 136, 212, 0)'
                  }], false),
                  shadowColor: 'rgba(0, 0, 0, 0.1)',
                  shadowBlur: 10
                }
              },
              itemStyle: {
                normal: {
                  color: 'rgb(0,136,212)',
                  borderColor: 'rgba(0,136,212,0.2)',
                  borderWidth: 12

                }
              },
              data: [5, 110, 125, 145, 122, 165, 122, 220, 182, 191, 134, 150]
            },
            {
              name: '商品访客数',
              type: 'line',
              smooth: true,
              symbol: 'circle',
              symbolSize: 5,
              showSymbol: false,
              lineStyle: {
                normal: {
                  width: 1
                }
              },
              areaStyle: {
                normal: {
                  color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
                    offset: 0,
                    color: 'rgba(251,212,75, 0.3)'
                  }, {
                    offset: 0.8,
                    color: 'rgba(251,212,75, 0)'
                  }], false),
                  shadowColor: 'rgba(0, 0, 0, 0.1)',
                  shadowBlur: 10
                }
              },
              itemStyle: {
                normal: {
                  color: 'rgb(251,212,75)',
                  borderWidth: 12
                }
              },
              data: ['54', '90', '60', '90', '40', '70', '97', '78', '89', '45', '78', '56']
            },
            {
              name: '商品访问量',
              type: 'line',
              smooth: true,
              symbol: 'circle',
              symbolSize: 5,
              showSymbol: false,
              lineStyle: {
                normal: {
                  width: 1
                }
              },
              areaStyle: {
                normal: {
                  color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
                    offset: 0,
                    color: 'rgba(244,102,124, 0.3)'
                  }, {
                    offset: 0.8,
                    color: 'rgba(244,102,124, 0)'
                  }], false),
                  shadowColor: 'rgba(0, 0, 0, 0.1)',
                  shadowBlur: 10
                }
              },
              itemStyle: {
                normal: {
                  color: 'rgb(244,102,124)',
                  borderWidth: 12
                }
              },
              data: [253, 322, 251, 125, 212, 354, 421, 452, 122, 220, 345, 391]
            }
          ]
        }
      )
    },
    initTerminalChart() {
      const chart = document.getElementById('terminal')
      chart.style.width = window.innerWidth / 2 - 120 + 'px'
      this.terminalChart = echarts.init(chart)
      this.terminalChart.setOption(
        {
          color: ['#00A3FF', '#FDD835', '#46D319'],
          title: {
            text: '',
            textStyle: {
              fontWeight: 'normal',
              fontSize: 16,
              color: '#353535'
            },
            x: 'left',
            y: 'bottom'
          },
          tooltip: {
            trigger: 'item',
            formatter: '{b}: {c} ({d}%)'
          },
          legend: {
            orient: 'vertical',
            right: '20%',
            y: 'center',
            data: ['Android', 'IOS', '其他']
          },
          series: [
            {
              name: '{a}',
              type: 'pie',
              radius: ['50%', '70%'],
              center: ['20%', '50%'],
              avoidLabelOverlap: false,
              label: {
                normal: {
                  show: false,
                  position: 'center'
                },
                emphasis: {
                  show: true,
                  textStyle: {
                    fontSize: '14',
                    fontWeight: 'bold'
                  }
                }
              },
              labelLine: {
                normal: {
                  show: false
                }
              },
              data: [
                { value: 335, name: 'Android' },
                { value: 310, name: 'IOS' },
                { value: 235, name: '其他' }
              ]
            }
          ]
        }
      )
    },
    initChannelChart() {
      const chart = document.getElementById('channel')
      chart.style.width = window.innerWidth / 2 - 120 + 'px'
      this.channelChart = echarts.init(chart)
      this.channelChart.setOption(
        {
          color: ['#00A3FF', '#FDD835', '#46D319'],
          title: {
            text: '',
            textStyle: {
              fontWeight: 'normal',
              fontSize: 16,
              color: '#353535'
            },
            x: 'left',
            y: 'bottom'
          },
          tooltip: {
            trigger: 'item',
            formatter: '{b}: {c} ({d}%)'
          },
          legend: {
            orient: 'vertical',
            right: '20%',
            y: 'center',
            data: ['H5', '小程序']
          },
          series: [
            {
              name: '{a}',
              type: 'pie',
              radius: ['50%', '70%'],
              center: ['20%', '50%'],
              avoidLabelOverlap: false,
              label: {
                normal: {
                  show: false,
                  position: 'center'
                },
                emphasis: {
                  show: true,
                  textStyle: {
                    fontSize: '14',
                    fontWeight: 'bold'
                  }
                }
              },
              labelLine: {
                normal: {
                  show: false
                }
              },
              data: [
                { value: 335, name: 'H5' },
                { value: 310, name: '小程序' }
              ]
            }
          ]
        }
      )
    },
    initTerritoryChart() {
      const chart = document.getElementById('territory')
      chart.style.width = window.innerWidth / 2 - 120 + 'px'
      this.territoryChart = echarts.init(chart)
      this.territoryChart.setOption(
        {
          tooltip: {
            trigger: 'item',
            formatter: '{b}: {c}人'
          },
          series: [
            {
              name: '中国',
              type: 'map',
              mapType: 'china',
              selectedMode: 'multiple',
              label: {
                normal: {
                  show: true
                },
                emphasis: {
                  show: true
                }
              },
              data: [
                {
                  name: '北京',
                  value: 3
                },
                {
                  name: '天津',
                  value: 2
                },
                {
                  name: '河北',
                  value: 38
                },
                {
                  name: '山西',
                  value: 6
                },
                {
                  name: '内蒙古',
                  value: 177
                },
                {
                  name: '辽宁',
                  value: 80
                },
                {
                  name: '吉林',
                  value: 90
                },
                {
                  name: '黑龙江',
                  value: 97
                },
                {
                  name: '上海',
                  value: 0
                },
                {
                  name: '江苏',
                  value: 11
                },
                {
                  name: '浙江',
                  value: 70
                },
                {
                  name: '安徽',
                  value: 127
                },
                {
                  name: '福建',
                  value: 52
                },
                {
                  name: '江西',
                  value: 67
                },
                {
                  name: '山东',
                  value: 19
                },
                {
                  name: '河南',
                  value: 81
                },
                {
                  name: '湖北',
                  value: 466
                },
                {
                  name: '湖南',
                  value: 334
                },
                {
                  name: '广东',
                  value: 302
                },
                {
                  name: '广西',
                  value: 644
                },
                {
                  name: '海南',
                  value: 15
                },
                {
                  name: '重庆',
                  value: 12
                },
                {
                  name: '四川',
                  value: 171
                },
                {
                  name: '贵州',
                  value: 18
                },
                {
                  name: '云南',
                  value: 49
                },
                {
                  name: '西藏',
                  value: 1
                },
                {
                  name: '陕西',
                  value: 181
                },
                {
                  name: '甘肃',
                  value: 6
                },
                {
                  name: '青海',
                  value: 16
                },
                {
                  name: '宁夏',
                  value: 30
                },
                {
                  name: '新疆',
                  value: 58
                }
              ]
            }
          ]
        }
      )
    },
    handleCurrentChange(val) {
      this.currentPage = val
    }

  }
}
</script>

<style lang="scss" scoped>
.flow-box {
  padding: 10px;
  padding-bottom: 40px;
  .stat-card-box {
    cursor: pointer;
    padding: 0 14px;
    .stat-card {
      border: 1px solid #666;
      padding: 20px;
      margin: 1%;
      width: 48%;
      display: inline-block;
      .card-title {
        display: flex;
        color: #666;
        i {
          margin-left: auto;
        }
      }
      .card-user {
        font-size: 30px;
        color: #353535;
        margin: 5px 0px 30px;
      }
      .card-yesterday {
        font-size: 12px;
        color: #666;
        .card-yesterday-num {
          margin-left: 10px;
        }
      }
    }
    .stat-card.portait {
      display: block;
      width: 100%;
      margin: 2%;
    }
    .stat-card.user-view {
      margin: 0;
      width: 25%;
    }
    .stat-card.user-view:not(:nth-child(1)) {
      border-left: none;
    }
    .stat-card.again {
      width: 45%;
      margin-top: 60px;
    }
  }
  .trafficAreaTopTitle {
    color: #353535;
    font-size: 14px;
    margin-bottom: 10px;
    margin-top: 20px;
    font-weight: bold;
  }
}
</style>
